<template>
    <div id="drawIO" style="height: 93vh;" class="flex-1 py-5 sm:px-6 lg:px-5 flex flex-col ml-64">
        <div id="view" class="ml-8 mt-3">
            <!--控制区域-->
            <div id="control">
                <!--标签-->
                <div id="label">
                    <label class="text-xl font-bold">Diagram</label>
                </div>
                <!--下拉框-->
                <div id="selectBox" class="mt-3">
                    <select id="select-format" aria-label="Diagram"
                        class="w-44 h-10 rounded-md pl-2 border border-gray-300" v-model="selectedFormat">
                        <option value="blockdiag">BlockDiag</option>
                        <option value="bpmn">BPMN</option>
                        <option value="bytefield">Bytefield</option>
                        <option value="seqdiag">SeqDiag</option>
                        <option value="actdiag">ActDiag</option>
                        <option value="nwdiag">NwDiag</option>
                        <option value="packetdiag">PacketDiag</option>
                        <option value="rackdiag">RackDiag</option>
                        <option value="c4plantuml">C4 with PlantUML</option>
                        <option value="d2">D2</option>
                        <option value="dbml">DBML</option>
                        <option value="ditaa">Ditaa</option>
                        <option value="erd">Erd</option>
                        <option value="excalidraw">Excalidraw</option>
                        <option value="graphviz">GraphViz</option>
                        <option value="mermaid" selected>Mermaid</option>
                        <option value="nomnoml">Nomnoml</option>
                        <option value="pikchr">Pikchr</option>
                        <option value="plantuml">PlantUML</option>
                        <option value="structurizr">Structurizr</option>
                        <option value="svgbob">Svgbob</option>
                        <option value="symbolator">Symbolator</option>
                        <option value="tikz">TikZ</option>
                        <option value="vega">Vega</option>
                        <option value="vegalite">Vega-Lite</option>
                        <option value="wavedrom">WaveDrom</option>
                        <option value="wireviz">WireViz</option>
                    </select>
                    <el-button @click="getSvg" type="primary" class="ml-3" plain>
                        确认
                    </el-button>
                </div>
            </div>
            <!--内容区域-->
            <div id="content" class="mt-3 flex">
                <!--文本框-->
                <textarea style="height: 80vh;width: 60vh;" v-model="content"
                    class="w-96 rounded-md border border-gray-300 focus:border-sky-500 focus:ring-sky-500 font-mono">
                </textarea>
                <!--画布-->
                <div id="drawArea" class="ml-10 flex flex-col justify-content-center" style="height: 80vh;width: 78vh;">
                    <div id="diagramTitle" class="text-center text-2xl font-bold">{{ graphTitle }}</div>
                    <div id="picture" class="flex justify-center">
                        <!-- <img src="https://kroki.io/mermaid/svg/eNpFkEFqwkAUhvc9RS7gCQShGj1Bd4OLrnQpnmC0VhtSMIJoYo2YIlHRxBaxYGPnMOp7k1l5BYdMSGf7_983P6_WfG7UtSc9_6DJ90h4-wi9CPr7K1vCB8N5D23GF7-x947ui3AsnPerWi5X0IpEUAPNdey34pDxvzCr8EkHVx7MzKqyFpN-ieDoC6J_U5qWklQn4G2g62QpfM-QLm-nN0GjmA341r_QFgRjDA88MG4nI8X1BC8TMJncc6ZTtHdg-WDt-HB1pi4cf-B1L8aBGim8g3A_U7acsJWUVf-qgjqAtClPtkoKJXsHsJavpg=="
                            class="ml-80 hover:scale-105 mt-10"> -->
                        <div class="hover:scale-105 mt-10" v-html="svgContent"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';

// 内容框
const content = ref(`graph TD;
    A[点击右侧图标显示行权限栏] --> B[选择要设置行权限的模型];
    B --> C[新建行权限];
    C --> D[填写行权限属性（逻辑符、字段等）];
    D --> E[勾选“是否启用”并关闭设置页面];
    E --> F[勾选权限页面右侧“启用行权限”];`);
// 流程图框
const svgContent = ref(`<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="0 0 276 662" height="662" class="flowchart" xmlns="http://www.w3.org/2000/svg" width="276" id="container"><style>#container{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#container .error-icon{fill:#552222;}#container .error-text{fill:#552222;stroke:#552222;}#container .edge-thickness-normal{stroke-width:1px;}#container .edge-thickness-thick{stroke-width:3.5px;}#container .edge-pattern-solid{stroke-dasharray:0;}#container .edge-thickness-invisible{stroke-width:0;fill:none;}#container .edge-pattern-dashed{stroke-dasharray:3;}#container .edge-pattern-dotted{stroke-dasharray:2;}#container .marker{fill:#333333;stroke:#333333;}#container .marker.cross{stroke:#333333;}#container svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#container p{margin:0;}#container .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#container .cluster-label text{fill:#333;}#container .cluster-label span{color:#333;}#container .cluster-label span p{background-color:transparent;}#container .label text,#container span{fill:#333;color:#333;}#container .node rect,#container .node circle,#container .node ellipse,#container .node polygon,#container .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#container .rough-node .label text,#container .node .label text,#container .image-shape .label,#container .icon-shape .label{text-anchor:middle;}#container .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#container .rough-node .label,#container .node .label,#container .image-shape .label,#container .icon-shape .label{text-align:center;}#container .node.clickable{cursor:pointer;}#container .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#container .arrowheadPath{fill:#333333;}#container .edgePath .path{stroke:#333333;stroke-width:2.0px;}#container .flowchart-link{stroke:#333333;fill:none;}#container .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#container .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#container .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#container .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#container .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#container .cluster text{fill:#333;}#container .cluster span{color:#333;}#container div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#container .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#container rect.text{fill:none;stroke-width:0;}#container .icon-shape,#container .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#container .icon-shape p,#container .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#container .icon-shape rect,#container .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#container :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="5" viewBox="0 0 10 10" class="marker flowchart-v2" id="container_flowchart-v2-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart-v2" id="container_flowchart-v2-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart-v2" id="container_flowchart-v2-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart-v2" id="container_flowchart-v2-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="container_flowchart-v2-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="container_flowchart-v2-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#container_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_A_B_0" d="M138,62L138,66.167C138,70.333,138,78.667,138,86.333C138,94,138,101,138,104.5L138,108"></path><path marker-end="url(#container_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_B_C_1" d="M138,166L138,170.167C138,174.333,138,182.667,138,190.333C138,198,138,205,138,208.5L138,212"></path><path marker-end="url(#container_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_D_2" d="M138,270L138,274.167C138,278.333,138,286.667,138,294.333C138,302,138,309,138,312.5L138,316"></path><path marker-end="url(#container_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_D_E_3" d="M138,398L138,402.167C138,406.333,138,414.667,138,422.333C138,430,138,437,138,440.5L138,444"></path><path marker-end="url(#container_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_E_F_4" d="M138,526L138,530.167C138,534.333,138,542.667,138,550.333C138,558,138,565,138,568.5L138,572"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(138, 35)" id="flowchart-A-0" class="node default"><rect height="54" width="252" y="-27" x="-126" style="" class="basic label-container"></rect><g transform="translate(-96, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="192"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>点击右侧图标显示行权限栏</p></span></div></foreignObject></g></g><g transform="translate(138, 139)" id="flowchart-B-1" class="node default"><rect height="54" width="236" y="-27" x="-118" style="" class="basic label-container"></rect><g transform="translate(-88, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="176"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>选择要设置行权限的模型</p></span></div></foreignObject></g></g><g transform="translate(138, 243)" id="flowchart-C-3" class="node default"><rect height="54" width="140" y="-27" x="-70" style="" class="basic label-container"></rect><g transform="translate(-40, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="80"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>新建行权限</p></span></div></foreignObject></g></g><g transform="translate(138, 359)" id="flowchart-D-5" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>填写行权限属性（逻辑符、字段等）</p></span></div></foreignObject></g></g><g transform="translate(138, 487)" id="flowchart-E-7" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>勾选“是否启用”并关闭设置页面</p></span></div></foreignObject></g></g><g transform="translate(138, 615)" id="flowchart-F-9" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>勾选权限页面右侧“启用行权限”</p></span></div></foreignObject></g></g></g></g></g></svg>`)
// 选定的格式
const selectedFormat = ref('mermaid');
// 图片标题
const graphTitle = ref('流程图');

const getSvg = async () => {
    try {
        const response = await axios.post(
            `https://kroki.io/${selectedFormat.value}/svg`,
            content.value,
            {
                headers: {
                    'Content-Type': 'text/plain'
                }
            }
        );
        svgContent.value = response.data;
    } catch (error) {
        console.error('请求出错:', error);
    }
};
</script>

<style scoped></style>